window.addEventListener('load',function(){
    var arrow_l =document.querySelector('.arrow_l');
    var arrow_r =document.querySelector('.arrow_r');
    // var main = document.querySelector('.main');
    var focus = document.querySelector('.focus');
    focus.addEventListener('mouseenter',function(){
        // console.log('enter');
        arrow_l.style.display='block';
        arrow_r.style.display='block';
        clearInterval(timer);
        timer=null;
    })
    focus.addEventListener('mouseleave',function(){
        // console.log('leave');
        arrow_l.style.display='none';
        arrow_r.style.display='none';
        timer=setInterval(function(){
            arrow_r.click();
        },4000);
    })

    var ul=focus.querySelector('ul');
    var ol=focus.querySelector('.circle');
    var focusWidth=focus.offsetWidth; 
    for(var i=0;i<ul.children.length;i++){
        var li =document.createElement('li');
        ol.appendChild(li);
         ol.children[0].className='current';
        // li.addEventListener('click',function(){
        //     for(var i=0;i<ol.children.length;i++){
        //         ol.children[i].className='';
        //     }
        //     this.className='current';
        //     var index=this.getAttribute('index');
            
        //     // index=num;
        //     console.log(index);
        //     focusWidth=focus.offsetWidth;
        //     animate(ul, -index*focusWidth-40);
        // })
    }
    var first=ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // var last=ul.children[ul.children.length-1].cloneNode(true);
    // ul.appendChild(last);
    var num=0;
    var circle=0;
    arrow_r.addEventListener('click',function(){
        if(num==ul.children.length-1){
            ul.style.left=0+'px';
            num=0;
        }
        num++;
        animate(ul,-num*focusWidth-40);
        // 
        circle++;
        if(circle==ol.children.length){
            circle=0;
        }
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        ol.children[circle].className='current';
    });
    arrow_l.addEventListener('click',function(){
        if(num==0){
            num=ul.children.length-1;
            ul.style.left=(-num)*focusWidth+'px';
           
        }
        num--;
        animate(ul,-num*focusWidth-40);
        circle--;
        if(circle<0){
            circle=ol.children.length-1;
        }
        for(var i=0;i<ol.children.length;i++){
            ol.children[i].className='';
        }
        ol.children[circle].className='current';
    });
    timer=setInterval(function(){
        arrow_r.click();
    },4000);
})